<template>
	<view :data-theme="theme">
		<!-- 规则类型 -->
		<!-- <u-tabs :list="list2" :activeStyle="{color:bgColor}" :lineColor="bgColor" :current="currentIndex"
			@click="tabClick">
		</u-tabs> -->
		<tab-bar style="background-color: #FFF;" :tabList="list2" :tabIndex.sync="currentIndex"
			@change="tabsClick"></tab-bar>

		<view class="u-page__item">
			<!-- 	<u-collapse accordion>
				<view v-for="item in tableData.records">
					<u-collapse-item :title="item.name" :key="item.id" @click.native="searchData(item)">
						<view class="content" v-for="inlineItem in TitleData.records" :key="inlineItem.id">
							<view class="u-collapse-content" @click="goDetail(inlineItem)">{{inlineItem.name}}</view>
						</view>
					</u-collapse-item>
				</view>
			</u-collapse> -->
			<view class="accordion">
				<view v-for="(item, index) in tableData.records" :key="index" class="accordion-item">
					<view :class="['accordion-header', { 'active': activeIndex === index }]"
						@click="toggleItem(index,item)">
						<view>
							{{ `${index + 1}` + '.'+ item.name }}
						</view>
						<uni-icons type="forward" size="20" />
					</view>
					<view v-if="activeIndex === index" class="accordion-content">
						<view class="accordion-title" v-for="(ele,indexO) in TitleData.records" :key="indexO" @click="goDetail(ele)">
							{{ ele.name ? `${index + 1}` + '.'+ `${indexO + 1}` + ele.name : '暂无' }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getFirstPlatformRuleApi,
		detailPlatformRuleApi
	} from '@/api/platformRule.js'
	import {
		setThemeColor
	} from '../../utils/setTheme';
	let app = getApp();
	export default {
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				tableForm: {
					size: 10,
					current: 1,
					type: '1',
					hide: 1,
				},
				currentIndex: 0,
				list2: [{
					name: '协议/规则',
					type: 1,
				}, {
					name: '公告',
					type: 2,
				}, {
					name: '意见征集',
					type: 3,
				}, {
					name: '普法专栏',
					type: 4,
				}, {
					name: '违规公示',
					type: 5,
				}],
				tabsIndex:null,
				tableData: [],
				TitleData: [],
				activeIndex: null,
			};
		},
		onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.getList();
		},
		methods: {
			async getList() {
				const res = await getFirstPlatformRuleApi(this.tableForm);
				this.tableData = res.data;
			},
			tabsClick(index) {
				if(index !== this.tabsIndex){
					this.tabClick(index)
				}
				this.tabsIndex = index;
				
			},
			async tabClick(item) {
				// this.currentIndex = item.index;
				// this.tableForm.type = item.index + 1;
				this.currentIndex = item;
				this.tableForm.type = item + 1;
				this.activeIndex = null;
				await this.getList();
			},
			//查看 二级下拉标题
			async searchData(ele) {
				delete this.tableForm.type;
				this.tableForm.id = ele.id;
				const res = await getFirstPlatformRuleApi(this.tableForm)
				this.TitleData = res.data;
				delete this.tableForm.id;
			},
			//详情页
			goDetail(inlineItem) {
				uni.navigateTo({
					url: `/pages/platformRule/detailPlatform/detailPlatform?id=${inlineItem.id}`
				})
			},

			async toggleItem(index, item) {
				this.activeIndex = this.activeIndex === index ? -1 : index;

				delete this.tableForm.type;
				this.tableForm.id = item.id;
				const res = await getFirstPlatformRuleApi(this.tableForm)
				this.TitleData = res.data;
				delete this.tableForm.id;

			}
		}
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	.u-page__item {
		margin-top: 20px;
		background-color: #ffffff;
	}

	.u-page {
		padding: 0;

		&__item {

			&__title {
				color: $u-tips-color;
				background-color: $u-bg-color;
				padding: 15px;
				font-size: 15px;

				&__slot-title {
					color: $u-primary;
					font-size: 14px;
				}
			}
		}
	}

	.u-collapse-content {
		font-size: 15px;
		border-bottom: 1px solid #f5f5f5;
		background-color: #fffff;
		padding: 5px 0;
		color: #000000;
	}

	.accordion {
		width: 100%;
	}

	.accordion-item {
		border-bottom: 1px solid #f0f0f0;
		margin-bottom: 5px;
	}

	/* .accordion-header {
		padding: 10px;
		background-color: #f0f0f0;
		cursor: pointer;
		display: flex;
		justify-content: space-between;
	} */
	.accordion-header {
		padding: 10px;
		border-radius: 8px;
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		/* 根据展开状态调整样式 */
		transition: background-color 0.3s;
		/* 添加背景色过渡效果 */
	}

	.accordion-header.active {
		border-radius: 8px;
		background-color: #f5f5f5;
	}

	.accordion-content {
		padding: 10px;
		display: block;
		background-color: #fff;
		/* 当展开时显示内容 */
		/* 默认隐藏内容 */
		transition: max-height 0.3s;
		/* 添加高度过渡效果 */
		overflow: hidden;
	}
	
	.accordion-title{
		padding: 20rpx;
	}
</style>